<template>
  <div class="api">
    <el-card>
      <el-form ref="form" :model="form" class="searchLine" label-width="120px">
        <el-form-item label="平台接口名称" class="searchItem">
          <el-select v-model="form.deptId" size="small" placeholder="请选择单位" style="width:230px;">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button type="primary" icon="el-icon-search" @click="listSearch" size="small" style="float:right;">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addNewStation" size="small">新增平台接口</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteStation"size="small">删除</el-button>
      </el-row>
    </el-card>

    <el-row style="margin-top:10px;">
      <el-table
      :data="tableData"
      tooltip-effect="dark"
      size="small"
      @selection-change="handleSelectionChange"
      style="width: 100%">
        <el-table-column
         type="selection"
         width="55">
       </el-table-column>
       <el-table-column
         label="序号"
         type="index"
         width="60"
         >
       </el-table-column>
       <el-table-column
         prop="apiName"
         label="接口名称名称"
         >
       </el-table-column>
       <el-table-column
         prop="stationName"
         label="IP地址">
       </el-table-column>
       <el-table-column
         prop="stationAddress"
         label="端口">
       </el-table-column>
       <el-table-column
         prop="stationAdminName"
         label="连接方式">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="登录账户">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="文件默认路径">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="配置时间">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="配置人">
       </el-table-column>
       <el-table-column
         label="操作">
         <template slot-scope="scope">
           <span class="btn" @click="changeStation(scope.row)">修改</span>
         </template>
       </el-table-column>
      </el-table>
    </el-row>
    <el-row class='pagination'>
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-row>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="newForm" ref="newStation" :rules="rules" label-width="115px">
        <el-form-item label="接口平台名称:" prop="name">
          <el-input v-model="newForm.name" size="small" placeholder="请输入接口平台名称" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="IP地址:"  prop="ip">
          <el-input v-model="newForm.ip" size="small" placeholder="请输入ip" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="端口:" prop="port">
          <el-input v-model="newForm.port" size="small" placeholder="请输入port" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="登陆账户:" prop="account">
          <el-input v-model="newForm.account" size="small" placeholder="请输入登陆账户" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="登录密码:" prop="psd">
          <el-input type="password" v-model="newForm.psd" size="small" placeholder="请输入登录密码" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="文件默认路径:" prop="path">
          <el-input v-model="newForm.path" placeholder="请输入文件默认路径" size="small" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="场站类型:">
          <el-radio-group v-model="newForm.type" size="small">
            <el-radio label="ftp">ftp</el-radio>
            <el-radio label="sftp">sftp</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSubmit" size="small">确 定</el-button>
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "api",
    data () {
      return {
        dialogFormVisible: false,
        form: {
          apiName: ''
        },
        tree: [],
        checkAll: '',
        newForm: {
          type: 'ftp',
          name: '',
          ip: '',
          port: '',
          account: '',
          psd: '',
          path: ''
        },
        isIndeterminate: true,
        selection: [],
        pageSize: 100,
        currentPage: 1,
        total: 0,
        tableData: [],
        rules: {
          name: [
            { required: true, message: '请输入接口平台名称', trigger: 'blur' }
          ],
          ip: [
            { required: true, message: '请输入IP地址', trigger: 'blur' }
          ],
          port: [
            { required: true, message: '请輸入端口', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入登陆账户', trigger: 'blur' }
          ],
          psd: [
            { required: true, message: '请输入登录密码', trigger: 'blur' }
          ],
          path: [
            { required: true, message: '请输入文件默认路径', trigger: 'blur' }
          ]
        },
        title: ''
      }
    },
    mounted() {

    },
    methods: {
      listSearch() {
        this.currentPage = 1
        this.pageSize = 100
        this.getList()
      },
      getList() {},
      deleteStation() {
        if (this.selection.length === 0) {
          this.$message.error('请选择需要删除的场站')
          return
        }
        this.$confirm('是否确认删除选中场站', '确定', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          console.log('111');
        }).catch(() => {
          console.log('取消删除')
        })
      },
      changeStation(data) {
        this.dialogFormVisible = true
        this.title = '修改场站信息'
      },
      handleSelectionChange(selection) {
        this.selection = selection
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.currentPage = currentPage
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      },
      addNewStation() {
        this.dialogFormVisible = true
        this.title = '新增平台接口'
      },
      addSubmit() {}
    }
  }
</script>

<style lang="scss" scoped>
  .api{
    .searchLine{
      .searchItem{
        display: inline-block;
        width: 350px;
        vertical-align: top;
      }
      .bigItem{
        width: 100%;
      }
      .el-form-item{
        margin-bottom: 3px !important;
      }
    }
    .pagination{
      text-align: center;
      margin-top: 20px;
    }
    .lineBar{
      width: 100%;
      display:flex;
      flex-wrap: nowrap;
      .line {
        flex: 4.8;
        height: 250px;
        margin-right: 4%;
      }
      .bar {
        flex:4.8;
        height: 250px;
      }
    }
    .title{
      font-size: 18px;
      color:#fff;
      margin: 20px 0;
      span{
        cursor: pointer;
        color:#38E5FF;
        font-size: 14px;
        margin-left: 20px;
      }
    }
    .el-dialog__body{
      padding-left: 35px;
    }
  }

</style>
